<template>
  <div class='setting'>
    <h1><el-button class='el-icon-plus addSprintBtn' @click='showGroupDialog' size="medium">添加小组</el-button></h1>
    <el-table
      :data="groupList"
      style='width:400px'>
      <el-table-column
        align='center'
        prop="groupName"
        label="小组名称"
        width='200'>
      </el-table-column>
      <el-table-column
        align='center'
        label="操作"
        width='200'>
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" style='backgroundColor:#3c8dbc;color:#fff' size="mini">修改小组</el-button>
          <el-button @click="handledel(scope.row)" type="danger" size="mini">删除小组</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-dialog title="新增小组" :visible.sync="groupDialogVisible" width='40%'>
      <el-form :model='newGroup'>
        <el-form-item label="小组名称" label-width="120px">
         <el-input v-model="newGroup.name" ref='newGroupInput' auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroup">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改小组" :visible.sync="editDialogVisible" width='40%'>
      <el-form :model='editGroup'>
        <el-form-item label="小组名称" label-width="120px">
         <el-input v-model="editGroup.name" ref='editGroupInput' auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled='addDisabled' @click="handleEditGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { _addGroup, _getGroupList, _deleteGroup, _editGroup } from '../common/api'
import config from '../common/config'
export default {
  data () {
    return {
      groupDialogVisible: false,
      editDialogVisible: false,
      addDisabled: false,
      currentEdit: {},
      editGroup: {},
      newGroup: {},
      groupList: []
    }
  },
  created () {
    this.getGroupList()
  },
  methods: {
    showGroupDialog () {
      this.groupDialogVisible = true
      this.$nextTick(_ => {
        this.$refs.newGroupInput.$refs.input.focus()
      })
    },
    getGroupList () {
      _getGroupList().then(res => {
        this.groupList = res.filter(item => item.groupStatus !== 0)
      })
    },
    addGroup () {
      let name = this.newGroup.name
      let repeat = this.groupList.filter(a => (a.groupName === name))
      if (repeat.length > 0) {
        this.$message({
          type: 'error',
          message: '小组名称重复'
        })
        return
      }
      if (name) {
        // 请求添加
        _addGroup(name).then(res => {
          if (+res.state === config.SUCCESS) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.getGroupList()
            this.groupDialogVisible = false
            this.newGroup.name = ''
          } else {
            this.$message({
              type: 'error',
              message: res.details
            })
          }
        }).catch(e => {
          this.$message({
            type: 'error',
            message: '添加失败'
          })
        })
      }
    },
    handleEditGroup () {
      const row = this.currentEdit
      if (!this.editGroup.name) return
      const data = {
        groupId: row.groupId,
        groupStatus: row.groupStatus,
        groupName: this.editGroup.name
      }
      this.addDisabled = true
      _editGroup(data).then(res => {
        this.addDisabled = false
        if (+res === config.SUCCESS) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.editDialogVisible = false
          this.editGroup.name = ''
          this.getGroupList()
        } else {
          this.$message({
            type: 'error',
            message: '修改失败'
          })
        }
      }).catch(e => {
        this.addDisabled = false
        this.$message({
          type: 'error',
          message: '添加失败'
        })
      })
    },
    handleEdit (row) {
      this.editDialogVisible = true
      this.currentEdit = row
      this.editGroup.name = row.groupName
      this.$nextTick(_ => {
        this.$refs.editGroupInput.$refs.input.focus()
      })
    },
    handledel (row) {
      this.$confirm('是否删除小组?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          _deleteGroup({groupId: row.groupId}).then(res => {
            if (+res === config.SUCCESS) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getGroupList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
        .catch(() => {
          console.log('取消删除操作')
        })
    }
  }
}
</script>

<style scoped lang='sass'>
.setting
  background: #fff
  height: auto
  min-height: 100%
  padding: 20px
  box-sizing: border-box
  h1
    margin-top: 0
  .addGroupBtn, .addSprintBtn
    vertical-align: text-top
    margin-right: 10px
</style>
